<template>
  <div class="container">
    <div class="mainBox">
      <el-table
        :data="salaryList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          prop="year,month,batchNo,createTime"
          label="工资表信息"
          width="230px"
        >
          <template slot-scope="scope">
            <p style="olor: rgb(96, 98, 102); font-weight: bold">
              {{ scope.row.year || '--' }}年{{ scope.row.month || '--' }}月第{{
                scope.row.batchNo || '--'
              }}批次工资
            </p>
            <p style="color: #999; font-size: 12px">
              创建日期： {{ scope.row.createTime || '--' }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="shouldPay"
          label="应发工资总额（元）"
          width="180px"
          align="center"
        >
          <template slot-scope="scope">
            <p>
              ￥{{ scope.row.shouldPay != null ? scope.row.shouldPay : '--' }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="shouldPayCount"
          label="应发总人数"
          width="160px"
          align="center"
        >
          <template slot-scope="scope">
            <p>
              {{
                scope.row.shouldPayCount != null
                  ? scope.row.shouldPayCount
                  : '--'
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="bankActPay"
          label="实发工资总额（元）"
          width="180px"
          align="center"
        >
          <template slot-scope="scope">
            <p>
              ￥{{ scope.row.bankActPay != null ? scope.row.bankActPay : '--' }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="bankActPayCount"
          label="实发总人数"
          width="160px"
          align="center"
        >
          <template slot-scope="scope">
            <p>
              {{
                scope.row.bankActPayCount != null
                  ? scope.row.bankActPayCount
                  : '--'
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="total,poundage"
          label="实付信息"
          width="230px"
          align="center"
        >
          <template slot-scope="scope">
            <p style="color: #fcb322; font-weight: bold">
              ￥{{ scope.row.total != null ? scope.row.total : '--' }}
            </p>
            <p style="color: #999; font-size: 12px">
              含手续费￥{{
                scope.row.poundage != null ? scope.row.poundage : '--'
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="statusName"
          label="工资表状态"
          width="160px"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.statusName == '待提交'">
              <p>{{ scope.row.statusName }}</p>
            </div>
            <div v-else>
              <div v-if="scope.row.statusName == '发放失败'">
                <p style="color: #d41212">{{ scope.row.statusName }}</p>
              </div>
              <div v-else>
                <p>{{ scope.row.statusName }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="toSalaryDetail(scope.$index, scope.row)"
              >查看详情</el-link
            >
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关企业人员工资数据"></emptyTable>
        </div>
      </el-table>
      <!-- getTableList为获取子组件的数据 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :requestUrl="requestUrl"
        :filterField="filterField"
      ></Pagination>
      <!-- 工资表详情弹框 -->
      <el-dialog
        title="工资明细"
        :visible.sync="formVisible"
        :append-to-body="true"
        :close-on-click-modal="false"
        @close="closeDialog"
        custom-class="brand-dialog-min-width"
        width="80%"
        :modal-append-to-body="false"
      >
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form :inline="true" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item label="所属部门" class="row-padding-bottom">
                <el-cascader
                  v-model="organId"
                  :options="orglist"
                  :props="{ checkStrictly: true }"
                  @change="handleChange"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="发放状态" class="row-padding-bottom">
                <el-select
                  v-model="drawerfilterField.payStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in salaryStateOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="员工确认状态" class="row-padding-bottom">
                  <el-select
                    v-model="drawerfilterField.confirmStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in confirmStatusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="姓名" class="row-padding-bottom">
                  <el-input
                    placeholder="请输入姓名"
                    @blur="drawerfilterField.name = changeValue($event)"
                    clearable
                    v-model="drawerfilterField.name"
                  ></el-input>
                </el-form-item>
              </el-col>
            </template>
            <el-col :lg="8" :xl="6">
              <el-form-item label="">
                <a
                  @click="toggleAdvanced"
                  style="margin-left: 40px; color: #409eff; cursor: pointer"
                  class="btnColor"
                >
                  {{ advanced ? '收起' : '展开' }}
                  <i
                    :class="
                      advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i>
                </a>
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="searchBtn"
                >
                  <span>搜索</span>
                </el-button>
              </el-form-item>
              <el-form-item>
                <exportBtn
                  :dataLen="salaryDetailList.length"
                  :filterField="{ params: JSON.stringify(drawerfilterField) }"
                  api="api-s/report/export_JC_NC_SALARY_DETAIL"
                ></exportBtn>
              </el-form-item>
            </el-col>
            <!-- <el-form-item>
                            <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                        </el-form-item> -->
          </el-form>
        </el-row>
        <div class="spacing"></div>
        <div
          ref="tableBox"
          :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
        >
          <el-table
            :data="salaryDetailList"
            v-loading="drawerLoading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              type="index"
              width="80px"
              label="序号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name,idcard,orgName"
              label="人员"
              width="230"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.name }}</p>
                <p>{{ scope.row.idcard }}</p>
                <!-- <p>{{scope.row.orgName}}</p> -->
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.orgName"
                  :columnName="'orgName'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="attDays"
              label="考勤天数"
              align="center"
              min-width="80px"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.attDays ? scope.row.attDays : '0' }}天</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="tel"
              label="手机号"
              align="center"
              :formatter="formatTd"
              min-width="114"
            ></el-table-column>
            <el-table-column
              prop="bankCardNo"
              label="银行卡号"
              align="center"
              :formatter="formatTd"
              width="180"
            ></el-table-column>
            <el-table-column prop="shouldPay" label="应发" align="center">
              <template slot-scope="scope">
                <p>￥{{ scope.row.shouldPay ? scope.row.shouldPay : '0' }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="shouldPay" label="实发" align="center">
              <template slot-scope="scope">
                <p>￥{{ scope.row.bankActPay ? scope.row.bankActPay : '0' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="payStatusName"
              label="发放状态"
              align="center"
              :formatter="formatTd"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="confirmStatusName"
              label="员工确认"
              align="center"
              :formatter="formatTd"
              min-width="80"
            ></el-table-column>
            <!-- <el-table-column prop="remark" label="备注" align="center" :formatter=formatTd width="50"></el-table-column> -->
            <el-table-column label="备注" width="230">
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.remark"
                  :columnName="'remark'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="issueRemark"
              label="提示"
              align="center"
              :formatter="formatTd"
              min-width="50"
            ></el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="drawerIsShow">
              <emptyTable emptyText="暂无相关信息"></emptyTable>
            </div>
          </el-table>
          <Pagination
            style="margin-top: 20px"
            ref="paginationDialog"
            :filterField="drawerfilterField"
            @getList="getDialogList"
            :requestUrl="requestDialogUrl"
            :isPackParams="isPackParams"
          ></Pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'

export default {
  name: 'jcSalaryList',

  props: ['companyId'],
  data() {
    return {
      requestUrl: 'api-su/salary/expand/salarylist',
      requestDialogUrl: 'api-su/salarydetail/base/vo',
      //表格数据
      salaryList: [],
      // batchId: "", //工资表详情id
      isPackParams: true,
      advanced: false,
      organId: '',
      orglist: [],
      salaryStateOptions: [], //工资表状态下拉框
      confirmStatusOptions: [], //员工确认状态
      filterField: {
        companyId: '',
      },
      //搜索条件
      drawerfilterField: {
        companyId: '',
        salaryId: '',
        organId: '',
        payStatus: '',
        confirmStatus: '',
        name: '',
      },
      formVisible: false, //工资详情弹框
      //表格数据
      salaryDetailList: [],
      isShow: false, //工资列表加载
      loading: true,
      drawerIsShow: false, //工资弹框列表加载
      drawerLoading: true,
    }
  },
  created() {
    // 部门下拉框
    this.getOrglist()
    //工资表状态下拉框
    this.getSalaryState()
    // 获取确认状态
    this.getConfirmStatus()
    //初始化工资列表
    this.filterField.companyId = this.companyId
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleChange(item) {
      var organId = this.organId[this.organId.length - 1]
      this.drawerfilterField.organId = organId
    },
    getOrglist() {
      this.axios({
        method: 'post',
        url: 'api-c/organization/expand/org/arc',
        data: {
          companyId: this.companyId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.orglist = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getSalaryState() {
      this.axios({
        method: 'post',
        url: 'api-su/salarydetail/base/issuestatus',
      })
        .then((response) => {
          this.salaryStateOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getConfirmStatus() {
      this.axios({
        method: 'post',
        url: 'api-su/salarydetail/base/confirmstatus',
      })
        .then((response) => {
          this.confirmStatusOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getTableList(data) {
      this.salaryList = data
      this.loading = false
      if (this.salaryList.length < 1) {
        this.isShow = true
      }
    },
    getDialogList(data) {
      this.salaryDetailList = data
      this.drawerLoading = false
      if (this.salaryDetailList.length < 1) {
        this.drawerIsShow = true
      }
    },
    //跳转详情
    toSalaryDetail(index, row) {
      this.drawerfilterField.salaryId = row.id
      this.drawerfilterField.companyId = this.companyId
      this.formVisible = true
      //初始化表格
      this.$nextTick(function () {
        this.organId = ''
        this.drawerfilterField.organId = ''
        this.drawerfilterField.payStatus = ''
        this.drawerfilterField.confirmStatus = ''
        this.drawerfilterField.name = ''
        this.$refs.paginationDialog.getTableListData()
      })
    },
    // 搜索
    searchList() {
      this.$refs.paginationDialog.getTableListData()
    },
    closeDialog() {
      this.formVisible = false
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
/deep/ .el-dialog__body {
  padding: 30px 0px;
}
.mainBox {
  padding: 24px;
}
</style>
